<template>
	<view class="addAddressContainer">
		<view class="top">
			<view class="item">
				<view class="left">联系人</view>
				<input v-model="form.userName" type="text" placeholder-class="line" placeholder="请填写收货人姓名" />
			</view>
			<view class="item theRadio">
				<u-radio-group v-model="form.value" @change="radioGroupChange">
					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled" active-color="red">{{ item.name }}</u-radio>
				</u-radio-group>
			</view>
			<view class="item">
				<view class="left">手机号</view>
				<input v-model="form.phoneNumber" type="text" placeholder-class="line" placeholder="请填写收货人手机号" />
				
			</view>
			<view class="item myAddress" @click="toSelectAddress">
				<view class="left">收货地址</view>
				<input disabled type="text" placeholder-class="line" placeholder="请选择收货地址" v-model="form.address"/>
				<u-icon name="arrow-right" class="rightIcone"></u-icon>
			</view>
			<view class="item">
				<view class="left">门牌号</view>
				<input v-model="form.number" type="text" placeholder-class="line" placeholder="例: 9号楼302室  " />
			</view>
			<view class="item">
				<view class="left">标签</view>
			</view>
			<!-- <view class="site-clipboard">
				<textarea placeholder-class="line" value="" placeholder="粘贴文本,可自动识别姓名和地址等" />
				<view class="clipboard">
					地址粘贴板
					<u-icon name="arrow-down" class="icon" :size="20"></u-icon>
				</view>
			</view> -->
		</view>
		<view class="bottom">
			<view class="default">
				<view class="left">
					<view class="set">设置默认地址</view>
					<view class="tips">在启动app时将优先定位至默认地址,避免下单时选择错误地址</view>
				</view>
				<view class="right"><switch color="green" @change="setDefault" /></view>
			</view>
		</view>
		<button class="saveButton" type="warn" @click="saveAddress">保存并使用</button>
	</view>
</template>

<script>
	import {mapState,mapMutations} from "vuex"
export default {
	data() {
		return {
			list: [
				{
					name: '先生',
					disabled: false
				},
				{
					name: '女士',
					disabled: false
				}
			],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			form:{
				value: '',
				userName:'',
				address:'',
				phoneNumber:'',
				number:'',
			}
			
		};
	},
	computed:{},
	methods: {
		setDefault() {},
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			// console.log(e);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			// console.log(e);
		},
		toSelectAddress(){
			// uni.navigateTo({
			// 	url:"../selectAddress/selectAddress"
			// });
			let _this = this
			uni.chooseLocation({
			    success: function (res) {
			        console.log('位置名称：' + res.name);
			        console.log('详细地址：' + res.address);
			        console.log('纬度：' + res.latitude);
			        console.log('经度：' + res.longitude);
					_this.form.address = res.address
					console.log(res)
			    }
			});
		},
		saveAddress(){
			const {form} = this
			console.log(form)
		}
	}
};
</script>

<style lang="scss" scoped>
.line {
	color: $u-light-color;
	font-size: 28rpx;
}
.addAddressContainer {
	background-color: #f2f2f2;
	.top {
		background-color: #ffffff;
		border-top: solid 2rpx $u-border-color;
		padding: 22rpx;
		
		.item {
			display: flex;
			font-size: 32rpx;
			line-height: 100rpx;
			align-items: center;
			border-bottom: solid 2rpx $u-border-color;
			.left {
				width: 180rpx;
			}
			input {
				text-align: left;
			}
			.people {
				height: 80rpx;
			}
		}
		.theRadio{
			height: 100rpx;
			padding-left: 180rpx;
		}
		.myAddress{
			position: relative;
			.rightIcone{
				position: absolute;
				color: gray;
				top: 0;
				right: 0;
			}
		}

		.site-clipboard {
			padding-right: 40rpx;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
			.clipboard {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: $u-tips-color;
				height: 80rpx;
				.icon {
					margin-top: 6rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.bottom {
		padding: 20rpx;
		padding-right: 0;
		background-color: #ffffff;
		font-size: 28rpx;
		.default {
			display: flex;
			justify-content: space-between;
			// border-bottom: solid 2rpx $u-border-color;
			line-height: 64rpx;
			.tips {
				font-size: 24rpx;
			}
			.right {
			}
		}
	}
	.saveButton {
		margin: 20rpx;
		border-radius: 50rpx;
		// background: red;
		color: white;
	}
}
</style>
